<template>
  <div style="position: absolute; height: 100%; width: 100%;">
    <el-container>
      <el-header>
        <!-- 搜索功能 -->
        <el-form :model="searchData">
            <el-form-item label="用户名">
              <el-input class="seech" v-model="searchData.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
              <el-input class="seech" v-model="searchData.userName"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <el-input class="seech" v-model="searchData.roleName"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input class="seech" v-model="searchData.mobilePhone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchUserDataPage">搜索</el-button>
            </el-form-item>
          </el-form>

        <div style=" text-align: right; padding-right: 30px;">
          <el-button size="mini" @click="showAddUser=true" v-permission='"ac0c402def17446982ce9246809f69ed"'>新增用户</el-button>
        </div>
      </el-header>
      <el-main>
          <el-table
            :data="userData"
            border
            v-loading="listLoading"
            style="width: 100%">
            <el-table-column prop="name" label="用户名" align="center">
            </el-table-column>
            
            <el-table-column prop="userName" label="账号" align="center">
            </el-table-column>
            
            <el-table-column prop="roleName" label="角色" align="center">
            </el-table-column>
            
            <el-table-column prop="mobilePhone" label="电话号码" align="center">
            </el-table-column>

            <el-table-column label="性别" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sex | sexFilter }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="deptName" label="部门" align="center">
            </el-table-column>

            <el-table-column prop="birthday" label="生日" align="center">
              <template slot-scope="scope">
                    <!-- <i class="el-icon-date"/> -->
                    {{ scope.row.birthday | dateFilter }}
              </template>
            </el-table-column>

            <el-table-column prop="postName" label="职位" align="center">
            </el-table-column>

            <el-table-column prop="areaName" label="区域" align="center">
            </el-table-column>

            <el-table-column prop="createUser" label="创建人" align="center">
            </el-table-column>

            <el-table-column label="操作" align="center" width="240">
            <template slot-scope="scope">
              <el-button size="mini" @click="updataUser=scope.row; showUpdateUser=true" v-permission='"1446aafb8bc34f32aa4efb45647725f0"'>修改</el-button>
              <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)" v-permission='"76d57bebb535440d886d91ea8731e84b"'>删除</el-button>
              <el-button size="mini" type="danger" v-if="scope.row.status == 0" @click="stautsShow(scope.$index, scope.row)" v-permission='"1a6854e95ea3433594dc9f5209f5fb35"'>启用</el-button>
              <el-button size="mini" type="warning" v-if="scope.row.status == 1" @click="stautsShow(scope.$index, scope.row)" v-permission='"1a6854e95ea3433594dc9f5209f5fb35"'>停用</el-button>
            </template>
          </el-table-column>
          </el-table>
      </el-main>

      <!-- 分页 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="tal" :hide-on-single-page="true" background :page-size="10" :page-sizes="[5,8,10]" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" style="margin-top:30px;">
    </el-pagination>
    </el-container>

    <el-dialog title="添加用户" :visible.sync="showAddUser">
      <addUser v-if="showAddUser" @refresh="getUserDataPage" @closeDialog="showAddUser = false" />
    </el-dialog>

    <el-dialog title="修改用户" :visible.sync="showUpdateUser">
      <updateUser v-if="showUpdateUser" :row="updataUser" @refresh="getUserDataPage" @closeDialog="showUpdateUser = false" />
    </el-dialog>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
  </div>
</template>

<script>
import request from '@/utils/request'
import addUser from './components/addUser.vue';
import updateUser from './components/updateUser.vue';
import qs from 'qs';
import axios from 'axios'
import { formatDate } from '@/utils/formatDate.js'


export default {
  components: { addUser, updateUser },
    filters: {
    sexFilter(sex) {
      if (sex == 0) {
        return '女'
      }
      if (sex == 1) {
        return '男'
      }
    },
    dateFilter(date) {
      // return formatDate(new Date(date), 'yyyy-MM-dd hh:mm:ss')
      if (date != null && date != '') {
        return formatDate(new Date(date), 'yyyy-MM-dd')
      } else {
        return ''
      }
     }
  },
  data() {
    return {
      tal:null,
      currentPage:1,
      userData:[],
      showAddUser: false,
      showUpdateUser: false,
      listLoading: true,
      pageInfo: [],
      selectedUser: null,
      options: [],
      searchDate: [],
      showbtn:true,
      searchData: {}
    }
  },
  created() {
    
  },
  mounted(){
    this.getUserDataPage();//初始加载
    this.getAllRole();//查询角色
  },
  methods: {
    searchUserDataPage() {
      this.searchData.page = 1;
      this.getUserDataPage();
    },
    // 刚加载页面是显示的数据  以及条件搜索时显示的数据 分页修改数据加载 三者共用一个接口
    getUserDataPage() {
      this.listLoading = true
      var userId = sessionStorage.getItem("userId");
      var token = sessionStorage.getItem("token");
      this.searchData.token = token;
      this.searchData.userId = userId;
      axios({
        url: '/sysUser/getUserByManager',
        method: 'post',
        data: qs.stringify(this.searchData)
      }).then((res) => {
          this.listLoading = false
          this.userData = res.data.data.list;
          this.tal = res.data.data.total;// 获取总条数
      }).catch(() => {

      })
    },
     //分页修改每页显示条数
    handleSizeChange(val){
      this.searchData.pageSize = val;
      this.getUserDataPage();
    },
    //分页跳转页面
    handleCurrentChange(val){
      this.searchData.page = val;
      this.getUserDataPage();
    },
    //查询所有角色
    getAllRole(){
      var userId = sessionStorage.getItem("userId");
      var token = sessionStorage.getItem("token");
      axios({
        method:'post',
        url:'/sysRole/queryAllRole',
        data:qs.stringify({ token: token, userId: userId})
      }).then((res) => {
      })
    },
    deleteUser(index, row) {
      this.$confirm('确认删除？')
        .then(_ => {
          var userId = sessionStorage.getItem("userId");
          var userName = sessionStorage.getItem("userName");
          axios({
            url: '/api/sysUser/deleteSysUser',
            method: 'post',
             data: qs.stringify({ token: 'abc123' , userId: userId , uName: userName ,uId : row.userId }),
          }).then((res) => {
           if(res.status == 200){
             this.$message(res.data.data);
             this.getUserDataPage()
            } else{
              this.$message(res.data.data)
            } 
          }).catch(_ => {})
        }).catch(_ => {});
    },
    stautsShow(index, row){
      var userId = sessionStorage.getItem("userId");
      var userName = sessionStorage.getItem("userName");
      axios({
        method:'post',
        url:'/sysUser/isUse',
        data:qs.stringify({token: 'abc123' , userId: userId , uName: userName ,uId : row.userId})
      }).then((res) => {
        if( res.data.status == 200){
          this.$message(res.data.data)
          this.getUserDataPage();
        }else{
          this.$message(res.data.data)
        }
      })
    }
    // getSearchDate(date) {
    //   if (date != null) {
    //     this.searchData.startTime = new Date(date[0])
    //     this.searchData.endTime = new Date(date[1])
    //   } else {
    //     this.searchData.startTime = null
    //     this.searchData.endTime = null
    //   }
    // }
  }
}
</script>
<style scoped>
  html, body {
      height:100%;
    }
    .el-form-item{
      width: 220px;
      display: inline-block;
    }
    .el-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      width: 100%;
      position: absolute;
      top: 0;
      left:0;
    }
    .el-header {
      margin-top: 10px;
      height: auto !important;
      min-height: 60px !important;
      flex-grow: 0;
      flex-shrink: 0;
    }
    .el-footer {
      text-align: center;
      padding: 14px 6px;
    }
    .el-main {
      height: 100%;
      padding: 10px !important;
      flex-grow: 1;
      flex-shrink: 1;
      overflow-y: auto;
    }
    .searchBtn {
      position: absolute;
      right: 30px;
    }
    .seech{
      width:160px;
    }
   
  /*  /deep/ .el-dialog__body{
      height: 85vh;
      overflow-y: auto;
    } */
</style>
